<template>
  <div>
     <!-- 头部 -->
        <div class="frist_show">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>专家咨询</el-breadcrumb-item>
            </el-breadcrumb>
          <el-divider></el-divider>
        </div>
        <!-- 图片轮播 -->
      <div>
        <el-carousel :interval="3000" type="card" height="300px" class="imgtop">
          <el-carousel-item v-for="item in img" :key="item.id">
            <img :src="item.src">
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 搜索框 -->
        <!-- <div style="position: absolute;top: 420px;left:590px;">
          <input type="text" class="commot-input" style="width:350px;height:40px" placeholder="请输入名医姓名,或者电话">
            <svg class="iconz myIcomz" style="position: absolute;top: 9px;left:320px;cursor: pointer">
              <use xlink:href='#icon-chaxun'></use>
            </svg>
        </div> -->
        <!-- 专家咨询 -->
        <div>
          <el-row>
            <el-col :span="5" style="margin-right:0px;margin-left:50px;margin-top:50px;width:300px;" v-for="item in zixun" :key="item.hmId">
                <div class="grid-content bg-purple" style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);border-radius: 8px;height: 23.3rem;text-align: center;">
                    <div style="width:300px;height:25px;color:white;background-color: RoyalBlue;font-family: '楷体';font-size:20px">硅谷体检中心</div>
                    <span class="wrap">
                      <el-avatar :src="'http://192.168.43.183/files/' + item.hmImg" :size=130 class="iconz"></el-avatar><br>
                      <span style="margin-left:100px;font-size:20px;">{{item.hmName}}</span><br><br>
                      <button class="btn1">{{item.hmGender}}</button><br><br>
                      <button class="btn2">{{item.hmDegree}}</button><br><br>
                      <button class="commot-button" style="margin-left:190px;outline: none;" @click="zixunzj(item.hmId)">咨询</button>
                    </span>
                </div>
            </el-col>
          </el-row>
        </div>
      </div>
</template>

<script>
export default {
  name: 'Physique',
  data () {
    return {
      img: [
        {id: 1, src: 'static/img/widget-risk01.png'},
        {id: 2, src: 'static/img/widget-risk03.png'},
        {id: 3, src: 'static/img/044b722af0cde71b50bc4c0ebcdbc90e(1).jpeg'}
      ],
      zixun: [],
      uid: ''
    }
  },
  methods: {
    initmanager () {
      this.$axios.post(`/api/manager`).then(result => {
        result.data.forEach((item, index) => {
          this.zixun.push(item)
        })
      })
    },
    zixunzj (id) {
      this.$axios.post(`/api/manager/chattable/${this.uid}/${id}`).then(result => {
        this.$router.push('/templist')
      })
    }
  },
  created () {
    this.initmanager()
    let men = sessionStorage.getItem('user')
    let hm = JSON.parse(men)
    this.uid = hm.memId
  }
}
</script>

<style scoped>
.frist_show{position: absolute;top: 0px;left:20px;width: 1500px;height: 50px;}

.frist_show .el-breadcrumb{margin-top: 15px;}
.el-avatar{cursor: pointer;transition: all 0.4s;}
.el-avatar:hover{transform: scale(1.1);}
.wrap {display: inline-block;position: relative;margin-top: 3rem;padding-left: 3rem;line-height: 2rem;}
.iconz {position: absolute;left: 10px;top: 0;height: 2rem;}
.imgtop{margin-top:70px;margin-left:30px;width:1500px}
.zhuanjia{margin-top:60px;margin-left:80px;width:1400px;height:500px;}
.btn1{margin-left:100px;font-size:15px;color:darkgrey;color:#ea5504;border:1px solid orange;width:110px;background: white;font-size: 13px;border-radius: 5px;}
.btn2{margin-left:100px;font-size:15px;color:darkgrey;color:LightSeaGreen ;border:1px solid Aquamarine ;width:110px;background: white;font-size: 13px;border-radius: 5px;}
</style>
